<template>
  <div>
    <mt-header fixed title="活动详情" style="background-color: #ff4d4f;color:#fff;z-index:933">
      <router-link to="/" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
    </mt-header>
    <div class="main">
      <div class="title">{{title}}</div>
      <div class="img">
        <img :src="'https://actwxapi.ouheshuju.com/api/v1/Images/Show/'+Picture" alt />
      </div>
      <div>
        <div class="times_tit">
          活动时间
          <span style="float:right;color:red">积分值：{{Score}}</span>
        </div>
        <div class="times">{{times}}</div>
        <div class="times_tit">活动位置</div>
        <div class="times">
          {{Address}}
          <span class="adress_jl">
            <i style="color:#ff4d4f;font-size:1rem" class="iconfont icondingwei"></i>
            {{jli}}米
          </span>
        </div>
        <div class="times_tit">Tips:{{Tips}}</div>
      </div>
      <div class="kong"></div>
      <div class="content">
        <div class="con_tit">活动详情</div>
        <div class="con_text">
          <p>{{Content}}</p>
        </div>
      </div>
      <div id="wrapper">
        <div class="img-list-item" v-if="isShow">
          <img
            width="95%"
            style="margin-left:2.5%"
            :src="'https://actwxapi.ouheshuju.com/api/v1/Images/Show/'+imgid"
          />
          <!-- <img
            width="95%"
            style="margin-left:2.5%"
            :src="'https://actwxapi.ouheshuju.com/api/v1/Images/Show/'+Picture"
            alt
          />-->
          <i class="iconfont iconshanchu2" @click="forkImage(imgid)"></i>
        </div>
        <div v-if="SigninID ==''">
          <div style="text-align: center;" v-if="pzShow">
            <i
              @click="qd"
              style="font-size:5rem;padding-left:2.5%"
              class="iconfont icontianjiazengjiajia"
            ></i>
          </div>
        </div>
      </div>
      <div class="qd">
        <mt-button v-if="SigninID!= ''" class="btn">已签到</mt-button>
        <mt-button v-if="SigninID=='' && IsOver== '0'" @click="qiandao" class="btn" type="danger">签到</mt-button>
        <mt-button v-if="IsOver== '1' && SigninID== ''" class="btn">已结束</mt-button>
      </div>
    </div>
  </div>
</template>
<script>
import https from "../../utils/http.js";

import wx from "weixin-js-sdk";
export default {
  data() {
    return {
      isShow: false,
      pzShow: true,
      id: "",
      title: "",
      IsOver: "",
      Picture: "",
      times: "",
      Address: "",
      lat: "",
      long: "",
      longitude: 0, //经度
      latitude: 0, //纬度
      sta_time: "",
      end_time: "",
      city: "",
      Content: "",
      jli: 0,
      Radius: 0,
      ActivityID: "",
      Coordinate: "",
      SigninID: "",
      Identity: 0,
      Score: 0,
      Tips: "",
      imgid: ""
    };
  },
  mounted() {
    this.get_list();

    this.getWXcode();
  },
  methods: {
    forkImage(row) {
      MessageBox.confirm("是否确定删除?")
        .then(action => {
          this.isShow = false;
          this.pzShow = true;
          this.imgid = "";
        })
        .catch(err => {});
    },
    get_list() {
      https({
        method: "GET",
        url: "/api/v1/Activities/GetDetail/" + this.id
      })
        .then(res => {
          console.log(res);
          if (res.Code == 200) {
            console.log(res.Data);
            this.title = res.Data.Name;
            this.Picture = res.Data.Picture;
            this.times = res.Data.StartTime + " 至 " + res.Data.EndTime;
            this.sta_time = res.Data.StartTime;
            this.end_time = res.Data.EndTime;
            this.Address = res.Data.Address;
            this.Coordinate = res.Data.Coordinate;
            if (this.Coordinate != "") {
              this.lat = res.Data.Coordinate.split(",")[0];
              this.long = res.Data.Coordinate.split(",")[1];
            }
            this.Content = res.Data.Content;
            this.Radius = res.Data.Radius;
            this.ActivityID = res.Data.ActivityID;
            this.SigninID = res.Data.SigninID;
            this.Score = res.Data.Score;
            this.Tips = res.Data.Tips;
            this.IsOver = res.Data.IsOver;
            //   this.allLoaded = false;
            //   this.PageIndex = res.ResultData.PageIndex;
            //   this.PageTotal = res.ResultData.PageTotal;
            //   this.PageIndex = 2;
            //   this.$refs.loadmore.onTopLoaded();
          }
        })
        .catch(err => {
          console.log(err);
        });
    },

    getWXcode() {
      let wechaturl = window.location.href.split("#")[0];
      console.log(wechaturl);
      https({
        method: "get",
        url: "/api/v1/WxJs/GetJsConfig/" + encodeURIComponent(wechaturl),
        data: {}
      })
        .then(res => {
          console.log(res);
          if (res.Code == 200) {
            this.list = res.Data.RecordList;
            wx.config({
              // debug: true, // 开启调试模式
              appId: res.Data.appId, // 必填，公众号的唯一标识
              timestamp: res.Data.timestamp, // 必填，生成签名的时间戳
              nonceStr: res.Data.nonceStr, // 必填，生成签名的随机串
              signature: res.Data.signature, // 必填，签名，见附录1
              jsApiList: [
                "openLocation",
                "chooseImage",
                "translateVoice",
                "getLocalImgData"
              ]
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
      wx.ready(res => {
        wx.getLocation({
          success: res => {
            this.longitude = res.longitude;
            this.latitude = res.latitude;
            let lat = "";
            let long = "";
            this.$jsonp("https://apis.map.qq.com/ws/coord/v1/translate", {
              locations: this.latitude + "," + this.longitude,
              type: "1",
              key: "PTABZ-LIC66-CHESN-EZLYV-LJ32F-GZFJW",
              output: "jsonp"
            })
              .then(res => {
                console.log(res);
                lat = res.locations[0].lat;
                long = res.locations[0].lng;
                var start = new qq.maps.LatLng(lat, long);
                console.log(this.Coordinate);
                if (this.Coordinate != "") {
                  var endA = new qq.maps.LatLng(this.lat, this.long);
                  var map =
                    Math.round(
                      qq.maps.geometry.spherical.computeDistanceBetween(
                        start,
                        endA
                      ) * 10
                    ) / 10;
                  this.jli = map;
                } else {
                  var endA = new qq.maps.LatLng(lat, long);
                  this.$jsonp("https://apis.map.qq.com/ws/geocoder/v1/", {
                    location: lat + "," + long,
                    key: "PTABZ-LIC66-CHESN-EZLYV-LJ32F-GZFJW",
                    get_poi: 1,
                    output: "jsonp"
                  })
                    .then(res => {
                      if (res.status == 0) {
                        this.Coordinate =
                          res.result.location.lat +
                          "," +
                          res.result.location.lng;
                        this.Address = res.result.formatted_addresses.recommend;
                      }
                    })
                    .catch(err => {
                      console.log(err);
                    });
                  this.jli = 0;
                }
              })
              .catch(err => {
                console.log(err);
              });
          },
          cancel: res => {
            Toast("用户拒绝授权获取地理位置,签到失败");
          }
        });
      });
    },
    qiandao() {
      if (this.imgid == "") {
        Toast("请您划到下方拍照上传");
      } else {
        Indicator.open({
          text: "Loading...",
          spinnerType: "fading-circle"
        });
        https({
          method: "POST",
          url: "/api/v1/Activities/SignIn",
          data: {
            ActivityID: this.ActivityID,
            Coordinate: this.Coordinate,
            Address: this.Address,
            Picture: this.imgid
          }
        })
          .then(res => {
            console.log(res);
            if (res.Code == 200) {
              Indicator.close();
              this.get_list();
              Toast("签到成功");
              this.$router.push({ path: "/activity_list" });
            } else {
              Indicator.close();
              Toast(res.Describe);
            }
          })
          .catch(err => {
            Indicator.close();
            console.log(err);
          });
      }
    },
    qd() {
      this.get_list();
      if (this.Identity != 1) {
        this.getWXcode();
        var timestamp = Date.parse(new Date());
        // var timestamp = Date.parse("2020-7-20");

        // var sta_date = new Date(this.sta_time).getTime(this.sta_time);
        var sta_date = new Date(this.sta_time.replace(/\-/g, "/")).getTime(
          this.sta_time
        );

        // var end_date = new Date(this.end_time).getTime(this.end_time);
        var end_date = new Date(this.end_time.replace(/\-/g, "/")).getTime(
          this.end_time
        );
        console.log(timestamp);
        console.log(this.sta_time.replace(/\-/g, "/"));
        console.log(end_date);
        // if (sta_date <= timestamp && timestamp <= end_date) {
        console.log("1111");
        if (this.jli < this.Radius) {
          wx.ready(() => {
            wx.chooseImage({
              //count: 1,//默认9
              sizeType: ["compressed"], //可以指定是原图还是压缩图，默认二者都有
              sourceType: ["camera", "album"], //可以指定来源是相册还是相机，默认二者都有
              success: res => {
                var localIds_val = res.localIds[0];
                let images;
                wx.getLocalImgData({
                  localId: localIds_val.toString(), //图片的本地ID
                  success: res => {
                    var localData = res.localData; //base64
                    if (localData.indexOf("data:image") == 0) {
                      var base64 = localData;
                    } else {
                      var base64 =
                        "data:image/jpeg;base64," +
                        localData.replace(/\n/g, "");
                    }
                    // var base64 = localData
                    //   .replace("data:image/png;base64,", "")
                    //   .replace("data:image/jgp;base64,", "");
                    Indicator.open({
                      text: "Loading...",
                      spinnerType: "fading-circle"
                    });
                    https({
                      method: "POST",
                      url: "/api/v1/Images/Upload",
                      data: {
                        FileName: localIds_val,
                        Base64String: encodeURIComponent(base64)
                      }
                    })
                      .then(res => {
                        console.log(res);
                        if (res.Code == 200) {
                          Indicator.close();
                          this.imgid = res.Data.FileID;
                          this.isShow = true;
                          this.pzShow = false;
                          // this.qiandao(res.Data.FileID);
                        } else {
                          Indicator.close();
                          Toast(res.Describe);
                        }
                      })
                      .catch(err => {
                        console.log(err);
                      });
                  }
                });
              }
            });
          });
        } else {
          Toast("您离签到地点还有" + this.jli + "米");
        }
        // } else {
        //   Toast("您当前不在签到时间范围内");
        // }
      } else {
        Toast("老师不能签到");
      }
    }

    //第二部分
    //位置信息在地图上展示
  },
  created() {
    this.id = this.$route.query.id;
    if (localStorage.getItem("Identity")) {
      this.Identity = localStorage.getItem("Identity");
    }
    console.log(this.Identity);
    console.log(this.id);
  }
};
</script>

<style lang="less" scoped>
.main {
  width: 100%;

  background: #fff;
  padding-top: 2.5rem;
  box-sizing: border-box;
  .qd {
    width: 100%;
    padding: 0.5rem 0;
    background: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    .btn {
      width: 95%;
      margin-left: 2.5%;
    }
  }
  .title {
    width: 95%;
    margin: 0 auto;

    font-size: 1.2rem;
    font-weight: 600;
    text-align: center;
  }
  .img {
    width: 95%;
    height: 350px;
    margin: 0 auto;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .map {
    width: 100%;
    height: 500px;
  }
  .times_tit {
    width: 95%;
    margin-top: 0.5rem;
    margin-left: 2.5%;
    margin-bottom: 0.5rem;
    color: #666;
    font-size: 0.8rem;
  }
  .times {
    width: 95%;
    margin-left: 2.5%;
    font-size: 1rem;
  }
  .adress_jl {
    float: right;
    .iconfont {
      font-size: 1rem;
    }
  }
  .kong {
    width: 100%;
    height: 0.5rem;
    background: #eee;
    margin-top: 1rem;
  }
  .content {
    width: 100%;
    padding: 2.5%;
    margin-bottom: 1rem;

    box-sizing: border-box;
    .con_tit {
      width: 100%;
      height: 1rem;
      line-height: 1rem;
      font-size: 1rem;
      font-weight: 600;
    }
    .con_text {
      width: 100%;
      margin-top: 1.5rem;
      font-size: 0.8rem;
      color: #666;
    }
  }
  .common {
    width: 148px;
    height: 148px;
    border: 1px solid #d8d8d9;
  }
  .img-list-item {
    width: 100%;
    position: relative;
  }
  .img-list-item img {
    box-sizing: border-box;
    vertical-align: middle;
    border: 0;
  }
  .img-list-item i {
    display: inline-block;
    // background: rgba(0, 0, 0, 0.6);
    // background-image: url(../../assets/images/2257.png);
    // background-size: 10px;
    // background-repeat: no-repeat;
    // background-position: 50%;
    color: red;
    position: absolute;
    top: -1rem;
    right: 0;
    font-size: 2rem;
  }
  .mb_10 {
    margin-bottom: 10px;
  }
  #wrapper:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    padding-bottom: 2rem;
    box-sizing: border-box;
    margin-bottom: 3rem;
  }
}
</style>
